<template>
  <div class="me">
    <div class="header">
      <div class="avatar">
        <img width="100%" height="100%" v-if="userInfo.avatar" :src="userInfo.avatar">
        <img width="100%" height="100%" src="../../assets/img/avatar.png" v-else>
      </div>
      <div class="right">
        <h1 class="title">{{userInfo ? userInfo.nick_name : ''}}</h1>
        <p class="message-font">ID : {{userInfo ? userInfo.id : ''}}</p>
      </div>
    </div>
    <split></split>
    <div class="type">
      <ul>
        <li class="type-content border-1px" v-for="(item,$index) in typeArray" :key="$index"
            @click="toRouter(item.target, item.name)">
          <i :class="classMap[$index]"></i>
          <h1 class="title">{{item.text}}</h1>
          <span class="red-solid" v-if="hasNewMessage && item.name === '我的消息'"></span>
          <i class="type-icon-more"></i>
        </li>
      </ul>
    </div>
    <split></split>
    <a href="javascript:;" class="out" @click="outPhone" v-if="showOut">退出登录</a>
    <a href="javascript:;" class="out" @click="loginPhone" v-if="!showOut">立即登录</a>
    <keep-alive>
      <router-view/>
    </keep-alive>
  </div>
</template>

<script type="text/ecmascript-6">
  import split from '../common/split/split'
  import {MessageBox} from 'mint-ui'

  export default {
    data() {
      return {
        typeArray: [
          {
            text: '我的游戏',
            name: 'myGame',
            target: '/me/myGame'
          },
          {
            text: '我的礼包',
            name: 'myGifts',
            target: '/me/myGift'
          },
          {
            text: '充值记录',
            name: 'bill',
            target: '/me/bill'
          },
          {
            text: '我的消息',
            name: 'message',
            target: '/me/message'
          },
          {
            text: '意见反馈',
            name: 'opinion',
            target: '/me/myOpinion'
          },
          {
            text: '关于我们',
            name: 'about',
            target: '/me/about'
          }
        ],
        hasNewMessage: false,
        showOut: false,
        userInfo: []
      }
    },
    created() {
      this.classMap = ['type-icon-game', 'type-icon-gift', 'type-icon-bill', 'type-icon-message', 'type-icon-question', 'type-icon-tips']
      //调用用户信息
      this.$http.get('/game/index.php?m=Home&c=Api&a=getUsersInfo').then((response) => {
        if (response.data.code === this.ERROR_OK) {
          this.userInfo = response.data.data
          if (this.userInfo.id) {
            this.showOut = true
          }
        }
      })
    },
    methods: {
      toRouter(target, name) {
        this.$router.push(target)
      },
      outPhone() {
        MessageBox({
          title: '提示',
          message: '确定要退出吗？',
          showCancelButton: true
        }).then(action => {
          if (action === 'confirm') {
            this.$http.get('/game/index.php?m=Home&c=PcApi&a=out').then((response) => {
              if (response.data.code === this.ERROR_OK) {
                this.Toast({
                  message: '退出成功',
                  position: 'bottom',
                  duration: 2000
                })
                sessionStorage.clear()
                setTimeout(() => {
                  location.reload()
                  this.showOut = false
                }, 500)
              } else {
                this.Toast({
                  message: '服务器繁忙，请稍后再试',
                  duration: 2000
                })
              }
            })
          }
        })
      },
      loginPhone() {
        if (this.PC) {
          this.eventBus.$emit('pcLogin', true)
        } else {
          this.$router.push({path: '/phoneLogin'})
        }
      }
    },
    activated() {
      //判断是否有新信息
      this.$http.get('/game/index.php?m=Home&c=Api&a=judgeIsMessage').then((response) => {
        if (response.data.code === this.ERROR_OK) {
          if (response.data.data.length > 0) {
            this.hasNewMessage = true
          }
        }
      })
    },
    components: {
      split
    }
  }
</script>

<style lang="stylus" rel="stylesheet/stylus">
  @import "../../assets/stylus/mixin.styl"
  .me
    position absolute
    width 100%
    height 100%
    background #f5f5fa
    .header
      display inline-flex
      padding 32px
      width 100%
      align-items center
      background #fff
      box-sizing border-box
      .right
        margin-left 32px
        .title
          font-size 34px
        .message-font
          margin-top 32px
          font-size 28px
          color #666
    .type
      padding 0 32px
      background #fff
      .type-content
        padding 32px 0
        border-1px(rgba(0, 0, 0, .2))
        &:last-child
          border-none()
        .title
          display inline-block
          margin-left 21px
          font-size 30px
          color #333
        .red-solid
          display block
          position absolute
          top 40px
          right 30px
          width 10px
          height 10px
          background red
          border-radius 50%
        .type-icon-game, .type-icon-gift, .type-icon-bill, .type-icon-message, .type-icon-question, .type-icon-tips, .type-icon-more
          display inline-block
          vertical-align top
          width 34px
          height 34px
          margin auto
          background-repeat no-repeat
          background-size cover
        .type-icon-game
          background-image url("../../assets/img/game-active@2x.png")
        .type-icon-gift
          height 33px
          background-image url("../../assets/img/gift-big@2x.png")
        .type-icon-bill
          width 34px
          height 38px
          background-image url("../../assets/img/bill@2x.png")
        .type-icon-message
          width 34px
          height 27px
          background-image url("../../assets/img/email@2x.png")
        .type-icon-question
          background-image url("../../assets/img/quetions@2x.png")
        .type-icon-tips
          background-image url("../../assets/img/tips@2x.png")
        .type-icon-more
          position absolute
          width 14px
          height 26px
          right 0
          background-image url("../../assets/img/more@2x.png")
    .out
      display block
      width 100%
      height 92px
      background #fff
      text-align center
      line-height 92px
      color rgb(51, 51, 51)
      font-size 30px
</style>
